<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="left" @click="goBack">
        <image class="back-icon" src="/static/back-icon.png"></image>
      </view>
      <text class="nav-title">入库详情</text>
    </view>
    
    <!-- 材料列表 -->
    <scroll-view class="material-list" scroll-y>
      <view v-for="(item, index) in detail.materials" :key="index" class="material-item">
        <view class="material-row">
          <text class="material-label">编码：</text>
          <text class="material-value">{{item.code}}</text>
        </view>
        <view class="material-row">
          <text class="material-label">名称：</text>
          <text class="material-value">{{item.name}}</text>
        </view>
        <view class="material-row">
          <text class="material-label">规格：</text>
          <text class="material-value">{{item.spec}}</text>
        </view>
        <view class="material-row">
          <text class="material-label">数量：</text>
          <text class="material-value">{{item.amount}} {{item.unit}}</text>
        </view>
        <view class="material-row">
          <text class="material-label">单价：</text>
          <text class="material-value">{{item.price}}</text>
        </view>
        <view class="material-row">
          <text class="material-label">材质单编号：</text>
          <text class="material-value">{{item.materialCode}}</text>
        </view>
        <view class="material-row">
          <text class="material-label">批次或炉号：</text>
          <text class="material-value">{{item.batchNumber}}</text>
        </view>
      </view>
    </scroll-view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      code: '',
      detail: {
        code: 'RK-000001',
        period: '第1期',
        supplier: '西藏交投工贸有限公司',
        time: '2023-08-28 20:25:45',
        status: '已入库',
        materials: [
          {
            code: 'CL-000000552',
            name: '沥青',
            spec: '90#',
            amount: '10.25',
            unit: '吨',
            price: '6400',
            materialCode: '83107412312',
            batchNumber: '5312716456459487232342'
          },
          {
            code: 'CL-000000552',
            name: '沥青',
            spec: '90#',
            amount: '10.25',
            unit: '吨',
            price: '6400',
            materialCode: '83107412312',
            batchNumber: '5312716456459487232342'
          },
          {
            code: 'CL-000000552',
            name: '沥青',
            spec: '90#',
            amount: '10.25',
            unit: '吨',
            price: '6400',
            materialCode: '83107412312',
            batchNumber: '5312716456459487232342'
          },
          {
            code: 'CL-000000552',
            name: '沥青',
            spec: '90#',
            amount: '10.25',
            unit: '吨',
            price: '6400',
            materialCode: '83107412312',
            batchNumber: '5312716456459487232342'
          }
        ]
      }
    }
  },
  onLoad(options) {
    // 获取路由参数中的入库单编码
    if (options.code) {
      this.code = options.code;
      // 实际项目中，这里应该调用接口获取详情数据
      this.getDetailData();
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    getDetailData() {
      // 实际项目中，这里应该通过API请求获取详情数据
      // 示例代码:
      // uni.request({
      //   url: 'your-api-url',
      //   data: { code: this.code },
      //   success: (res) => {
      //     this.detail = res.data;
      //   }
      // })
      
      // 这里使用模拟数据
      console.log('获取入库单详情，编码：', this.code);
      // 实际应用中不需要这行，直接使用API返回数据即可
      this.detail.code = this.code;
    }
  }
}
</script>

<style>
.container {
  flex: 1;
  background-color: #E6EAF3;
}

.nav-bar {
  height: 88px;
  background: linear-gradient(103deg, #4980FF -4%, #2B6BFF 99%);
  padding-top: 44px;
  padding-left: 15px;
  padding-right: 15px;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.left {
  position: absolute;
  left: 15px;
  height: 24px;
  width: 24px;
  justify-content: center;
  align-items: center;
}

.back-icon {
  width: 24px;
  height: 24px;
}

.nav-title {
  font-size: 18px;
  color: #FFFFFF;
  font-weight: 500;
  margin-left: 20px;
}

.material-list {
  flex: 1;
  padding: 5px 10px 10px 10px;
}

.material-item {
  background-color: #FFFFFF;
  border-radius: 16px;
  margin-bottom: 10px;
  padding: 15px;
  width: 347px;
  height: 192px;
  align-self: center;
}

.material-row {
  flex-direction: row;
  height: 24px;
  align-items: center;
}

.material-label {
  font-size: 12px;
  color: #72767C;
  width: auto;
  margin-right: 0;
}

.material-value {
  font-size: 12px;
  color: #72767C;
  flex: 1;
}
</style> 